<template>
	<NodeWrapper :containerStyle="containerStyle" :properties="props.properties"
		shape="rect"
	class="baseNodeContainer">
		<a-row style="width: 100%; height: 100%">
			<a-col :span="24">
				<a-textarea
					v-show="props.isHovered && !props.isDragging"
					v-model:value="remarks"
					placeholder="请输入注释"
					style="border: none; height: 100%; resize: none"
				/>
				<span v-show="!props.isHovered || props.isDragging">
					{{ remarks }}
				</span>
			</a-col>
		</a-row>
	</NodeWrapper>
</template>

<script setup>
import { defineProps, onMounted, getCurrentInstance } from 'vue'
import { StepForwardOutlined } from '@ant-design/icons-vue'
import NodeWrapper from './nodeWrapper.vue'

const props = defineProps([
	'model',
	'graphModel',
	'isSelected',
	'isHovered',
	'disabled',
	'properties',
	'text',
	'updateText',
	'isDragging'
])
const remarks = ref(props?.text)

watch(remarks, (newValue, oldValue) => {
	props.updateText(newValue)
})

const containerStyle = {
	width: props.model?._width + 'px',
	height: props.model?._height + 'px',
	borderRadius: '6px',
	display: 'flex',
	'justify-content': 'center',
	'align-items': 'center'
}
</script>

<style scoped lang="less">
.baseNodeContainer {
	background-color: antiquewhite;
	border: 1px solid #40a9ff;
	color: black;

}
</style>
